<template>
  <div class="wrap-panel">
    <div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)" contenteditable="true"
      spellcheck="false"></div>
    <h5>选择表情</h5>
    <div class="item-panel" :key="i" v-for="(item,i) in 75">
      <img :src="require(`./img/`+(Number(i)+1)+`.gif`)" :alt="i"
        @mouseover="emojiConversion($event,'over',i)" @mouseleave="emojiConversion($event,'leave',i)"
        @click="emojiConversion($event,'click',i)">
    </div>
  </div>


</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        imgSrc: './img',
        emojiList: []
      }
    },
    props: {
      msg: String
    },
    components: {
    },
    methods: {
      emojiConversion(event, status, index) {
        if (status === "over") {
          event.target.src = require(`./img/${index+1}.gif`);
        } else if (status === "click") {
          // 表情输入
          const imgSrc = require(`./img/${index+1}.gif`);
          /**
           * 不推荐的写法:
           *   无法获取焦点
           *   无法在当前焦点的位置插入元素
           */
          //const imgTag = document.createElement("img");
          //imgTag.src = imgSrc;
          //this.$refs.msgInputContainer.appendChild(imgTag);

          /**
           * 推荐使用document暴露的execCommand 方法来操作此处
           *   可以在当前焦点处插入元素
           *   感谢评论区掘友的建议
           */
          const imgTag = `<img src="${imgSrc}" width="28" height="28" alt="${index}">`;
          document.execCommand("insertHTML", false, imgTag);
        } else {
          event.target.src = require(`./img/${index+1}.gif`);
        }
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  body {
    text-align: left;
  }

  .wrap-panel {
    width: 300px;
    margin: 0 auto;
    text-align: left;
  }

  .input-panel {
    padding: 10px;
    margin: 0 auto;
    text-align: left;
    width: 300px;
    height: 100px;
    border: 1px solid #666;
    outline: none;
  }

  .item-panel {
    display: inline-block;
  }
</style>